<script setup lang="ts">
import { usePlayerStore } from '@/stores/playerStore'
import Scroll from '@/components/scroll/index.vue'
const playerStore = usePlayerStore()
import usePaddingBottom from '@/common/use-padding-bottom'
const { paddingBottomStyle } = usePaddingBottom()
interface IProps {
  songList: ISongItem[]
  loading: boolean
  height: number
  loadingText?: string
  more?: boolean
  pullDownRefresh?: boolean
  pullUpLoad?: boolean
  request?: (arg?: any) => any
  refreshRequest?: () => any
}
const emits = defineEmits<{
  (event: 'scroll', pos: IPos): void
}>()
const props = withDefaults(defineProps<IProps>(), {
  songList: () => [],
  loadingText: '',
  more: false,
  request: () => {},
  refreshRequest: () => {}
})
const scrollRef = ref<InstanceType<typeof Scroll>>()
const pullingUpLoading = ref<boolean>(false)
const pullingDownLoading = ref<boolean>(false)
const refreshText = ref<string>('下拉刷新')
const scrollY = ref<number>(0)
const pullingUpText = computed<string>(() => {
  if (props.more) {
    if (pullingUpLoading.value) {
      return '加载中...'
    }
    return '下拉加载更多'
  } else {
    return '哥这回真没了~'
  }
})
function playMusic(song: ISongItem) {
  playerStore.playMusic(song, props.songList)
}
function scrollHandle(pos: IPos) {
  scrollY.value = pos.y
  emits('scroll', pos)
}
// 上拉加载更多
async function pullingUp() {
  pullingUpLoading.value = true
  await props.request()
  pullingUpLoading.value = false
  scrollRef.value?.scroll?.finishPullUp()
  scrollRef.value?.refresh()
}
async function pullingDown() {
  pullingDownLoading.value = true
  refreshText.value = '刷新中'
  await props.refreshRequest()
  scrollRef.value?.scroll?.finishPullDown()
  scrollRef.value?.refresh()
  pullingDownLoading.value = false
  refreshText.value = '下拉刷新'
}
</script>

<template>
  <scroll
    ref="scrollRef"
    v-loading="loading"
    :height="props.height"
    :pull-down-refresh="props.pullDownRefresh"
    :pull-up-load="props.pullUpLoad"
    :threshold="10"
    :stop="0"
    class="song-list"
    @scroll="scrollHandle"
    @pulling-up="pullingUp"
    @pulling-down="pullingDown"
  >
    <ul :style="paddingBottomStyle">
      <template v-if="props.pullDownRefresh">
        <div v-show="scrollY >= 10" class="loading">{{ refreshText }}</div>
      </template>
      <li
        v-for="(song, index) in props.songList"
        :key="song.id"
        class="song-item"
        @click.stop="playMusic(song)"
      >
        <span class="song-index" :class="index < 3 ? 'rank' : ''">{{ index + 1 }}</span>
        <div class="song-info">
          <p class="song-name" :class="playerStore.currentSong?.id === song.id ? 'current' : ''">
            <span class="text">{{ song.name }}</span>
            <span v-if="song.alia.length > 0" class="alias">({{ song.alia[0] }})</span>
          </p>
          <p class="song-desc">
            <span class="singer-name">{{ song.ar.map((item) => item.name).join('/') }}</span>
            <span class="separator">-</span>
            <span class="album-name">{{ song.al.name }}</span>
          </p>
        </div>
      </li>
      <template v-if="props.pullUpLoad">
        <div v-show="songList.length" class="loading">{{ pullingUpText }}</div>
      </template>
    </ul>
  </scroll>
</template>

<style scoped lang="scss">
.song-list {
  position: absolute;
  top: 262px;
  left: 0;
  width: 100%;
  bottom: 0;
  ul {
    padding: 20px;
    background-color: $color-background;
    .song-item {
      display: flex;
      height: 45px;
      .song-index {
        margin-right: 5px;
        display: inline-flex;
        flex: 0 0 20px;
        justify-content: center;
        align-items: center;
        color: $color-dialog-background;
        font-size: $font-size-medium;
        &.rank {
          color: $color-theme;
        }
      }
      .song-info {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        overflow: hidden;
        .song-name {
          display: flex;
          color: $color-text-d;
          .text {
            color: #ffffff;
            font-size: 13px;
            @include no-wrap;
          }
          .alias {
            flex: 1;
            margin-left: 5px;
            color: $color-text-d;
            font-size: 13px;
            @include no-wrap;
          }
          &.current {
            color: $color-theme;
            .text {
              color: $color-theme;
            }
            //.alias {
            //  color: $color-theme;
            //}
          }
        }
        .song-desc {
          color: $color-text-d;
          @include no-wrap;
          .singer-name {
            font-size: $font-size-small;
          }
          .separator {
            margin: 0 5px;
          }
          .album-name {
            font-size: $font-size-small;
          }
        }
      }
    }
  }
  .loading {
    text-align: center;
    line-height: 20px;
    font-size: $font-size-small;
    color: $color-text-d;
  }
}
</style>
